<template>
  <div class="best-seller-carousel swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="item">
          <div class="product-info-card product-info-card-green mb-30">
            <div class="product-info-card-thumb">
              <img
                :src="require('assets/images/products/product-3.png')"
                alt="product"
              />
            </div>
            <div class="product-info-card-content">
              <h3>
                <a :href="'/shop/shop-single'"
                  >New Micro <br />
                  Chairs</a
                >
              </h3>
              <ul class="review-star">
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
              </ul>
              <a href="#" class="redirect-link">Add To Cart</a>
            </div>
          </div>
          <div class="product-info-card product-info-card-violet">
            <div class="product-info-card-thumb">
              <img
                :src="require('assets/images/products/product-13.png')"
                alt="product"
              />
            </div>
            <div class="product-info-card-content">
              <h3>
                <a :href="'/shop/shop-single'"
                  >New Micro <br />
                  Lamps</a
                >
              </h3>
              <ul class="review-star">
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
              </ul>
              <a href="#" class="redirect-link">Add To Cart</a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="item">
          <div class="product-info-card product-info-card-green mb-30">
            <div class="product-info-card-thumb">
              <img
                :src="require('assets/images/products/product-13.png')"
                alt="product"
              />
            </div>
            <div class="product-info-card-content">
              <h3>
                <a :href="'/shop/shop-single'"
                  >New Micro <br />
                  Chairs</a
                >
              </h3>
              <ul class="review-star">
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
              </ul>
              <a href="#" class="redirect-link">Add To Cart</a>
            </div>
          </div>
          <div class="product-info-card product-info-card-violet">
            <div class="product-info-card-thumb">
              <img
                :src="require('assets/images/products/product-13.png')"
                alt="product"
              />
            </div>
            <div class="product-info-card-content">
              <h3>
                <a :href="'/shop/shop-single'"
                  >New Micro <br />
                  Lamps</a
                >
              </h3>
              <ul class="review-star">
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
                <li class="full-star"><i class="flaticon-star"></i></li>
              </ul>
              <a href="#" class="redirect-link">Add To Cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-navigation disabled">
      <button type="button" class="swiper-button-prev">
        <i class="flaticon-back"></i>
      </button>
      <button type="button" class="swiper-button-next">
        <i class="flaticon-next"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({});
const {} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  var bestSellerCarousel = new Swiper(".best-seller-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
  });
});

const methods = {};
</script>
<style lang="scss" scoped></style>
